<template>
    <div>
        <el-card shadow="never">
            <vxe-grid ref='xGrid' v-bind="gridOptions" v-on="gridEvent">
                <template #logslot="{ row }">
                    <el-popover placement="top-start" :width="150" :height="150" trigger="hover">
                        <el-image style="width: 120px; height: 120px" :src="row.logo" fit="cover" />
                        <template #reference>
                            <el-image style="width: 36px; height: 36px" :src="row.logo" fit="cover" />
                        </template>
                    </el-popover>
                </template>

                <template #statusSlot="{ row }">
                    <el-tag v-if="row.status === '1'" type="success">通过</el-tag>
                    <el-tag v-else type="danger">未通过</el-tag>
                </template>
                <template #discountSlot="{ row }">
                    {{ row.discount ? row.discount.title : "" }}
                </template>

                <template #action="{ row }">
                    <el-button-group>
                        <el-button type="primary" @click="show(row)">查看</el-button>
                        <el-button type="danger" @click="del(row)">删除</el-button>
                        <el-button type="danger" plain @click="audit(row)">审核</el-button>
                        <el-button type="success" plain @click="bind(row)">绑定优惠</el-button>
                        <el-button type="success" @click="recommend(row)">推荐</el-button>
                        <el-button type="warning" @click="edit(row)">编辑资料</el-button>
                    </el-button-group>
                </template>
            </vxe-grid>
        </el-card>
        <!-- 优惠选项 -->
        <el-drawer v-model="showDrawer" size="400">
            <template #header>
                <h4>设置优惠</h4>
            </template>
            <template #default>
                <div>
                    <el-radio v-for="(dis, ind) in discounts" :key="ind" v-model="disountId" :label="dis.id" size="large">
                        {{ dis.title }}
                    </el-radio>
                </div>
            </template>
            <template #footer>
                <div style="flex: auto">
                    <el-button type="primary" @click="confirmClick">提交</el-button>
                </div>
            </template>
        </el-drawer>

        <!-- 设置推荐 -->
        <el-drawer v-model="showRecDrawer" size="400">
            <template #header>
                <h4>设置推荐</h4>

            </template>
            <template #default>
                <span class="text-sm text-gray-400">数值越大越靠前</span>
                <div>
                    <el-input v-model="recLevel" type="number"></el-input>
                </div>
            </template>
            <template #footer>
                <div style="flex: auto">
                    <el-button type="primary" @click="confirmRecClick">提交</el-button>
                </div>
            </template>
        </el-drawer>
    </div>
</template>

<script setup lang="ts">
import router from '@/plugins/router'
import { http } from '@/plugins/axios'
/**
 * 为商家绑定优惠   
 */
const { gridOptions } = await useMerchant();
const showDrawer = ref(false)
const disountId = ref(0)
const merId = ref(0)
const confirmClick = async () => {
    await http.request({
        url: `merchant/${merId.value}/discount/${disountId.value}`,
        method: "get"
    })
    showDrawer.value = false
    reload()
}
/**
 * 为商家绑定优惠
 */


// 重新请求数据
const reload = () => {
    xGrid.value.commitProxy('reload')
}
const xGrid = ref()
const gridEvent: VxeGridListeners<RowVO> = {
    proxyQuery() {
        console.log('数据代理查询事件')
    },
    proxyDelete() {
        console.log('数据代理删除事件')
    },
    proxySave() {
        console.log('数据代理保存事件')
    }
}
const edit = (row: any) => {
    router.push(`/merchant/edit/${row.id}`)
}
const show = (row: any) => {
    router.push(`/merchant/show/${row.id}`)
}

const del = async (row: any) => {
    await http.request({
        url: `merchant/${row.id}`,
        method: 'delete'
    })
    reload()
}
const audit = async (row: any) => {
    await http.request({
        url: `merchant/${row.id}/audit`,
        method: 'get'
    })
    reload()
}


// 绑定优惠
const bind = (row: any) => {
    showDrawer.value = true
    merId.value = row.id
}

//获取所有优惠
const discounts = ref()
const getDiscounts = async () => {
    const res = await http.request({
        url: `discount`,
        method: "get"
    })
    discounts.value = res.data
}


// 推荐相关
const showRecDrawer = ref(false)
// 当前商家的推荐等级
const recLevel = ref(0)
const levelMer = ref({
    id: null,
})
const recommend = (row) => {
    showRecDrawer.value = true
    recLevel.value = row.recommend
    levelMer.value = row
}
const confirmRecClick = async () => {
    await http.request({
        url: `merchant/${levelMer.value.id}/recommend`,
        method: 'post',
        data: {
            recommend: recLevel.value
        }
    })
    reload()
    showRecDrawer.value = false
}
onMounted(() => {
    getDiscounts()
})
</script>
    
<style scoped></style>